<template>
<div>
  <el-breadcrumb  separator-class="el-icon-arrow-right" :separator="$route.path" >
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: '/viewtestpaper' }">测试任务</el-breadcrumb-item>
  <el-breadcrumb-item>批阅试卷</el-breadcrumb-item>
</el-breadcrumb>
   <el-card class="card" shadow="always" style="margin-top: 20px;">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
      type="index"
      width="100">
    </el-table-column>
      <el-table-column
        prop="tpTitle"
        label="试卷名"
        >
      </el-table-column>
      <el-table-column
        prop="className"
        label="班级"
       >
      </el-table-column><el-table-column
        prop="userName"
        label="出卷人"
       >
      </el-table-column><el-table-column
        prop="taskStartTime"
        label="测试开始时间"
      >
      </el-table-column><el-table-column
        prop="taskEndTime"
        label="测试结束时间"
       >
      </el-table-column><el-table-column
        prop="taskEscapeTime"
        label="耗时(分钟)"
       >
      </el-table-column><el-table-column
        prop="counter"
        label="交卷人数"
       >
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
        <el-button
          size="mini"
          :disabled="scope.row.counter<=0"
          type="primary"
          @click="handleEdit(scope.$index, scope.row)">批阅试卷</el-button>
      </template>
      </el-table-column>
    </el-table>
   
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="items">
    </el-pagination>
  </div>
   </el-card>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {
          currentPage: 1,//当前标签页
          pageSize:10,//当前一页的数量
          tableData: [],//当前数组
          pages:0,//总页码
          items:0//总记录数
        }
      },
       methods: {
         handleEdit(index,row) {//点击批阅
        this.$router.push({path:'/markingtestpaper',query:{taskId:row.taskId}})
      },
      handleSizeChange(val) {//当前一页的数量
       this.pageSize=val
        this.initializeData()
      },
      handleCurrentChange(val) {//点击标签页
        this.currentPage=val
        this.initializeData()
      },
      initializeData(){// 初始化数据
      let that=this
         that.$get("/api/TestPaper/GetTestTask", 
              {
               pageIndex:that.currentPage,
               pageSize:that.pageSize
              
            }).then((response)=>{
              that.tableData=response.data.data
               that.tableData=that.tableData.map(item=>{
                   item.taskEndTime= item.taskEndTime.replace("T", " ");//去掉时间里面的T
                   item.taskStartTime=item.taskStartTime.replace("T", " ");//去掉时间里面的T
                   return item
                 })
               that.pages=response.data.pages//总页码
               that.items=response.data.items//总记录数
            })
            .catch((error)=>{
                console.log(error)
            })
      }
    },
    created(){
      this.initializeData()//执行初始化数据
    }
    }
  </script>


<style scoped lang="less">
.card{
  margin: 10px 0 0 10px;
}
.block{
  padding: 20px;
  text-align: center;
}
</style>

